<style>
  .theme {
    border: #def solid 1px;
    text-align: center;
    position:absolute;
  }
  
  .theme-info {
    background: #def;
    color: #000;
    height: 36px;
    line-height: 36px;
  }
  
  .theme:hover .theme-info, .theme.selected:hover .theme-info {
    background: #07c;
    color: #fff;
  }
  
  .theme.selected .theme-info {
    background: #060;
    color: #fff;
  }
  
  .theme:hover .theme-info a, .theme.selected .theme-info a {
    color: #fff;
  }
  
  .mobile {
    box-sizing: content-box;
    padding: 10px;
  }
  
  .mobile-top {
    height: 40px;
    width: 315px;
    background: #000;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-sizing: content-box;
  }
  
  .mobile-body {
    height: 560px;
    width: 315px;
    background: #fff;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    box-sizing: content-box;
  }
  
  .mobile-body iframe {
    width:100%;
    height:100%;
  }
  
  .mobile-bottom {
    height: 60px;
    line-height: 60px;
    width: 315px;
    background: #000;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-sizing: content-box;
    color: #fff;
  }
  
  .mobile-body img {
    width: 100%;
  }
  
  .setting{
    margin-left:400px;
    min-height:680px;
  }
  
  .setting h4{
    height:36px;
    line-height:36px;
    border-bottom:#ddd solid 1px;
    margin-top:0;
  }
  
  .color-preview{
    display:block;
    width:20px;
    height:20px;
    float:right;
    margin-left:10px;
    border:#000 solid 1px;
  }
</style>

<script type="text/javascript" src="__PUBLIC__/Style/Common/jscolor/jscolor.js"></script>




<div class="theme">
  <div class="mobile">
    <div class="mobile-top"></div>
    <div class="mobile-body">
      <iframe id="iframe" src="{$indexUrl}"></iframe>
    </div>
    <div class="mobile-bottom">{$theme.name}</div>
  </div>
</div>

<div class="setting">
  <h4>颜色设置</h4>
  <form action="" method="post" role="form" id="color-form" class="form-horizontal">
    <volist name="config" id="vo">
    <switch name="vo.varType">
    
    <case value="color">
    <div class="form-group">
      <label for="{$vo.varName}" class="col-sm-2 control-label">{$vo.varTitle}</label>
      <div class="col-sm-2">
        <input type="text" class="form-control color" name="config[{$vo.varName}]" id="{$vo.varName}" data-type="color" placeholder="" value="{$vo.value}">
      </div>
    </div>
    </case>
    
    <case value="number">
    <div class="form-group">
      <label for="{$vo.varName}" class="col-sm-2 control-label">{$vo.varTitle}</label>
      <div class="col-sm-2">
        <input type="number" class="form-control" name="config[{$vo.varName}]" id="{$vo.varName}" placeholder="" value="{$vo.value}">
      </div>
    </div>
    </case>
    
    <case value="string">
    <div class="form-group">
      <label class="col-sm-2 control-label">{$vo.varTitle}</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" name="config[{$vo.varName}]" id="{$vo.varName}" placeholder="" value="{$vo.value}">
      </div>
    </div>
    </case>
    
    <case value="image">
    <div class="form-group">
      <label class="col-sm-2 control-label">{$vo.varTitle}</label>
      <div class="col-sm-6">
        <input type="text" class="form-control margin-bottom" name="config[{$vo.varName}]" id="{$vo.varName}" placeholder="" value="{$vo.value}">
        <div><span class="btn btn-primary" id="upload-image">上传图片</span></div>
      </div>
    </div>
    </case>
    
    <case value="select">
    <div class="form-group">
      <label class="col-sm-2 control-label">{$vo.varTitle}</label>
      <div class="col-sm-4">
        <select type="text" class="form-control" name="config[{$vo.varName}]" id="{$vo.varName}">
          <foreach name="vo.varDataSource" key="k" item="vo1"><option value="{$k}" <eq name="k" value="$vo['value']">selected</eq>>{$vo1}</option></foreach>
        </select>
      </div>
    </div>
    </case>
    
    </switch>
    </volist>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-8">
      	<input type="hidden" name="id" value="{$theme.id}">
        <button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/savePost" data-action-callback="reload">保存更改</button>
      </div>
    </div>
  </form>
 </div>

<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">
  function reload () {
    $("#iframe").attr("src", "{$indexUrl}?" + new Date().getTime() );
  };
  
  $(function(){
    
    $("#upload-image").uploadify({
      'multi'			      :	true,
      'buttonClass'	    :	'margin-bottom',
      'fileSizeLimit'   : 	'200kb',
      'buttonText'	    :	'上传图片',
      'fileTypeDesc' 	  : 	'Image Files',
      'fileTypeExts' 	  : 	'*.jpg; *.png',
      'swf'			        : 	'__PUBLIC__/Style/Common/uploadify/uploadify.swf',
      'uploader'		    : 	'__MODULE__/Upload/uploadOne',
      'onUploadSuccess'	: function(data, res) {
      	var url = eval("(" + res + ")").extra.url;
      	$("#bg_image").val ( url );
      }
    });
  });
</script>